<extend name="desktop_default/template/base_index2" />

<block name="area_header">

    <style type="text/css">
        body{
            background: #f5f5f5;
        }
        .order-list{

        }
        .order-list .btn-state{
            list-style-type: none;
            color: #757575;
            padding: 0px;
        }
        .order-list .btn-state li{
            float: left;
            padding: 0 20px;
            color: #757575;
            border-left: 1px solid #e0e0e0;
        }
        .order-list .btn-state li.first{
            border-left:0px;
        }
        .order-list .btn-state a.active {
            color: #ff6700;
        }
        .order-list .order-item{
            margin-bottom: 20px;
            border: 1px solid #e0e0e0;
        }
        .order-item .order-summary .order-status{
            font-size: 18px;
            text-align: left;
            color: #b0b0b0;
            padding: 25px 30px 1px;
        }
        .order-item .order-detail-table{

            width: 100%;
        }
        .order-item .order-detail-table th{
            font-size: 1.2rem;
            height: 28px;
            padding: 10px 30px;
            border-bottom: 1px solid #e0e0e0;
            font-weight: 400;
            color: #757575;
            vertical-align: bottom;
        }
        .order-item .order-detail-table th.col-sub{
            width: 240px;
            text-align: right;
            padding: 2px 30px;
        }

        .order-item .order-detail-table th p{
            margin: 0px;
        }
        .order-item .order-detail-table th.col-sub .num{
            font-size: 28px;
        }
        .order-detail-table .goods-list{
            margin: 0;
            padding: 10px 0;
            list-style-type: none;
        }
        .order-detail-table .goods-list li {
            position: relative;
            height: 80px;
            margin: 10px 0;
            padding: 18px 18px 18px 100px;
            line-height: 22px;
            color: #333;
        }
        .order-detail-table .goods-list p{
            margin: 0px;
            text-align: left;
            font-size: 1.2rem;
        }
        .order-detail-table td{

            padding: 0 30px;
        }
        .goods-list .figure-thumb {
            position: absolute;
            left: 0;
            top: 0;
        }
        .btn-line-gray {
            border-color: #b0b0b0;
            background: #fff;
            color: #757575;
        }
    </style>

</block>

<block name="area_body">
    <include file="desktop_default/width/right" />

    <header class="header">
        <include file="desktop_default/width/top" />
        {:W('Partials/nav_group')}
    </header>
    <div class="div_main shop-container am-cf">
        <div class="div_left" >
            <include file="desktop_default/width/list"/>
        </div>
        <div class="div_right" >
            <div class="order-list">
                <h5 class="title">我的订单</h5>
                <div class="am-cf">
                    <ul class="btn-state am-cf">
                        <li class="first "><a href="javascript:void(0)" class="active"  data-type="0">全部有效订单</a></li>
                        <li><a href="javascript:void(0);"  data-type="1">待支付({$tobePaidNum})</a></li>
                        <li><a href="javascript:void(0);" data-type="2">待收货({$shippedNum})</a></li>
                        <li ><a href="javascript:void(0);" data-type="3">已关闭</a></li>
                    </ul>
                </div>

                <div class="am-text-center">
                    <i class="am-icon-spinner am-icon-pulse am-text-lg J_loading"></i>
                </div>

                <div class="order am-text-center">
                </div>

                <div class="pager"></div>
        <!-- END OF SHop-container -->

            </div>
        </div>
    </div>

    <include file="desktop_default/width/floor" />
</block>

<block name="area_footer">

    <script id="ordertemplate" type="text/x-handlebars-template">
        {{#if data}}
        {{#each data}}

        <div class="order-item">
            <div class="order-summary">
                <div class="order-status">
                    {{#eq pay_status 1}}
                    {{order_status_desc}}
                    {{else}}
                    {{pay_status_desc}}
                    {{/eq}}

                </div>
            </div>

            <table class="order-detail-table">
                <thead>
                <tr>
                    <th class="col-main">
                        <p class="caption-info">{{create_date}}<span class="sep">|
                        </span>{{contactname}}<span class="sep">|</span>
                            订单号：
                            <a href="{:U('Shop/Orders/view')}?code={{order_code}}">{{order_code}}</a>
                            <span class="sep">|</span>{{pay_type}}</p>
                    </th>
                    <th class="col-sub">
                        <p class="caption-price">订单金额：<span class="num">{{price}}</span>元</p>
                    </th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="order-items">
                            <ul class="goods-list">
                                {{#each _items}}
                            <li>
                                <div class="figure figure-thumb">
                                    <a href="{:U('Shop/Product/detail')}?id={{p_id}}" target="_blank">
                                        <img src="{{img}}" width="80" height="80" alt="{{name}}"> </a>
                                </div>
                                <p class="name">
                                    <a href="{:U('Shop/Product/detail')}?id={{p_id}}" target="_blank">{{name}}</a>
                                </p>
                                <p class="price">{{price}}元 × {{count}}</p>
                            </li>
                                {{/each}}
                            </ul>
                        </td>
                        <td class="order-actions">
                            <a class="am-btn am-btn-sm am-btn-danger btn-line-gray" href="{:U('Shop/Orders/view')}?code={{order_code}}">订单详情</a>
                            {{#eq order_status 5}}
                            <a class="am-btn am-btn-sm am-btn-danger btn-line-gray" href="{:U('Shop/Orders/after')}?code={{order_code}}">申请售后</a>

                            {{/eq}}
                        </td>
                    </tr>
                </tbody>

            </table>

            <div class="btn-controls  am-padding-sm am-text-right">

            </div>
        </div>
        {{/each}}
        {{else}}
        <div class="am-text-info">没有相关数据!</div>
        {{/if}}
    </script>

    <script type="text/javascript" src="__CDN__/handlebar/3.0.3/handlebars.js?v=1.0"></script>

    <script>
        function eq(v1,v2,options){
            if(v1 == v2){
                //满足条件继续执行
                return options.fn(this);
            }else{
                //不满足条件执行
                return options.inverse(this);
            }
        }


        function eqs(v1,v2,v3,v4,options){
            if(v1 == v2&&v3==v4){
                //满足条件继续执行
                return options.fn(this);
            }else{
                //不满足条件执行
                return options.inverse(this);
            }
        }

        var orderCtrl = (function () {
            var pager = $(".order-list .pager");
            var container = $(".order-list .order");
            var curpage = 1;
            var doing_ajax = false;
            var prevType = false;
            var currentType = false;
            var template = function(){};

            function showLoading(){
                $(".J_loading").show();
                container.hide();
            }

            function hideLoading(){
                $(".J_loading").hide();
                container.show();
            }
            function setType(type){
                prevType = currentType;
                currentType = type;
                $(".order-list .btn-state a").each(function(index,item) {
                    if($(item).data("type") == type){
                        $(item).addClass("active");
                    }else{
                        $(item).removeClass("active");
                    }
                });
            }
            function pagerClick(ev){
                var $a = $(ev.target);

                curpage = $a.data("p");
                curpage = parseInt(curpage);
                query();
            }

            function bindPagerClick(){
                $("a",pager).each(function(index,item){
                    var p =$(item).text();
                    $(item).attr("data-p",p);
                    $(item).attr("href","javascript:void(0);");
                    $(item).click(pagerClick);
                });

            }
            function bindStateChangeClick(){
                $(".order-list .btn-state a").click(function(ev){
                    console.log(ev.target);
                    setType($(ev.target).data("type"));
                    query();
                });
            }
            function query(){

                if(doing_ajax){
                    return ;
                }
                //上一次type 不等于这一次,则重置分页为1开始
                if(prevType != currentType){
                    curpage = 1;
                }
                $.ajax({
                    url:"{:U('Shop/Orders/ajax_list')}?p="+curpage,
                    type:"POST",
                    data: {type:currentType,p:curpage},
                    dataType:"json",
                    beforeSend:function(){
                        doing_ajax = true;
                        showLoading();
                    }
                }).always(function(){
                    hideLoading();
                    doing_ajax = false;
                }).done(function(data){

                    if(data.status){

                        if( !data.info){
                            container.empty();
                        }else{
                            var info = data.info;
                            $(".order-list .pager").html(info.show);
                            bindPagerClick();
                            var html = template({data:info.list});
                            container.html(html);
                        }

                    }else{
                        alertMsg(data.info);
                    }
                }).fail(function(data){
                    alertMsg(data.responseText);
                });
            }

            function init(){
                prevType = currentType = $(".btn-state .active a").data("type");
                var source  = $("#ordertemplate").html();
                template = Handlebars.compile(source);
                Handlebars.registerHelper("eq",eq);
                Handlebars.registerHelper("eqs",eqs);
                bindStateChangeClick();
            }

            return {
                showLoading:showLoading,
                hideLoading:hideLoading,
                bindPagerClick:bindPagerClick,
                query:query,
                init:init,
            }
        })();



        $(function(){
            orderCtrl.init();
            orderCtrl.query();
        })
    </script>

</block>
